<template>
	<view class="">
		<u-form-item :label="item.label" borderBottom ref="formitem" :prop="item.value" 
		:required="item.required">
			<!-- <view  >{{ inputValue }}</view> -->
			<view @click="!disabled && itemtap()" style="flex: 1; padding: 0" ref="formitem">{{ inputValue }}</view>
			<!-- :class="[value ? 'uni-input-input' : 'select-wrap']" -->
		</u-form-item>

		<area-tree ref="areaTree" :areaTree="list" @change="change"></area-tree>
	</view>
</template>

<script>
	import areaTree from "@/pages/my/components/areaTree.vue"
	export default {
		components: {
			areaTree
		},
		mixins: [uni.$u.mpMixin, uni.$u.mixin],
		data() {
			return {
				// inputValue: "",
				show: false,
			};
		},
		computed: {
			disabled() {
      this.getParentData("u-form")
      return this.parent.disabled;
    },
			list() {
				console.log(this.item.options, "this.item.options");
				return this.item.options;
			},
			inputValue() {
				if (this.data.province == '' || !this.data.province) {
					return '请选择'
				}
				return `${this.data.province} ${this.data.city} ${this.data.county}`
			},
		},
		props: {
			item: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			data: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			value: {
				typeof: [String, Number, Boolean, Array, Object],
				default: () => {
					return "";
				},
			},
		},

		methods: {
			blur() {
				this.$emit("input", this.inputValue);
				uni.$u.formValidate(this.$refs.formitem, "blur");
			},
			select(e) {
				// console.log(e);
				this.$emit("input", String(e.value));
				uni.$u.formValidate(this.$refs.formitem, "blur");
				this.show = false;
				let dqitem = this.list.find((e2) => {
					return String(e2.value) == String(e.value);
				});
				if (this.item.onChange) {
					this.item.onChange.call(this, {
						emit: this.$emit,
						activeOption: dqitem,
					});
				}
			},
			change(e) {
				console.log(e, "eee");
				this.$emit("change", {
					province: e.province,
					city: e.city,
					county: e.district,
				})
			},
			itemtap() {
				// this.value
				this.$refs.areaTree.showPickerFn();
			}
		},
	};
</script>

<style scoped lang="scss">
	.uni-input-input {
		font-size: 14px !important;
		color: #171a1d !important;
		line-height: 99rpx !important;
		height: 99rpx !important;
		padding-left: 10px;
	}

	.uni-forms-item__label {
		margin-left: 0;
		font-size: 14px !important;
		color: #171a1d !important;
		line-height: 99rpx !important;
		height: 99rpx !important;
	}
</style>